/*
    个人空间主页
*/
/*整个页面的外部容器*/
.topic-zone-wrapper{
    width:100%;
    margin:0 auto;
}
/*页面顶部*/
.topic-zone-wrapper .topic-zone-top{
    width:100%;
    margin: 0 auto;
    padding-bottom: 1px;
    background: #12c2e9; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #12c2e9, #c471ed, #f64f59); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}
.topic-zone-wrapper .topic-zone-top .topic-zone-title{
    width:100%;
    padding:20px 0;
    color:springgreen;
    text-align: center;
}
.topic-zone-wrapper .topic-zone-top .page-native{
    margin:0 0 10px 10px;
}
.topic-zone-wrapper .topic-zone-top ul{
    width:100%;
    display: flex;
}
/* 欢迎进入空间 */
.topic-zone-wrapper .topic-zone-top .welcome-li {
    display: flex;
    margin-left:150px;
}

.topic-zone-wrapper .topic-zone-top .welcome-li .userNickName{
    color:#FF9900;

}
.topic-zone-wrapper .topic-zone-top .user-head-image{
    width:40px;
    height:40px;
    border:1px solid deepskyblue;
    border-radius: 100% 100%;
}
.topic-zone-wrapper .topic-zone-top .welcome-li p{
    line-height: 40px;
}

.topic-zone-wrapper .topic-zone-top .welcome-title{
    height:30px;
    color:greenyellow;
    font: bolder 18px "微软雅黑";
    line-height: 30px;
    margin-right:20px;
}
/* 返回个人空间 */
.topic-zone-wrapper .topic-zone-top .back-to-main{
    display: block;
    height:30px;
    color:springgreen;
    line-height: 40px;
    margin-left:20px;
}

/* 退出登录 */
.topic-zone-wrapper .topic-zone-top .login-out-btn{
    width:100px;
    height:30px;
    margin-left:600px;
    border:1px solid deepskyblue;
    color:cadetblue;
    cursor: pointer;
}
/* 个人中心 和 关注管理 */
.topic-zone-wrapper .topic-zone-top .personal,
.friend-manage{
    width:100px;
    height:30px;
    display: block;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
    background: cadetblue;
    color:white;
    border:1px solid deepskyblue;
    text-decoration: none;
    font: 14px "微软雅黑 Light";
    line-height: 30px;
}

/*中间部分*/
.topic-zone-wrapper .topic-zone-center{
    width:80%;
    min-height:600px;
    margin:20px auto;
    display: flex;
    /*border:1px solid blue;*/
    /*background:rgba(255,255,255,.3);*/
    background: #ffefba; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ffefba, #ffffff); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ffefba, #ffffff);
}
.topic-zone-wrapper .topic-zone-center h2{
    width:100%;
    height:40px;
    line-height: 40px;
    border-bottom: 1px solid red;
}
/* 好友列表模块 */
.topic-zone-wrapper .topic-zone-center .topic-zone-friend-list-wrapper{
    width:20%;
    text-align: center;
    border:1px solid orange;

}
.topic-zone-wrapper .topic-zone-center .topic-zone-friend-list-wrapper ul{
    height:93%;
    background: rgba(255,255,255,.6);
}
.topic-zone-wrapper .topic-zone-center .topic-zone-friend-list-wrapper li{
    height:60px;
    line-height: 60px;
    padding: 10px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.topic-zone-wrapper .topic-zone-center .topic-zone-friend-list-wrapper .topic-zone-friend-list .friend-list-null{
    display: block;
    text-align: center;
    color:Red;
}
.topic-zone-wrapper .topic-zone-center .topic-zone-friend-list-wrapper li a{
    color:black;
    text-decoration: none;
}
.topic-zone-wrapper .topic-zone-center .topic-zone-friend-list-wrapper li:hover{
    background:rgba(0,0,0,.3);
}
.topic-zone-wrapper .topic-zone-center .topic-zone-friend-list-wrapper li:hover a{
   color:cornflowerblue;
}
.topic-zone-wrapper .topic-zone-center .topic-zone-friend-list-wrapper li img{
    width:60px;
    height:60px;
    margin-left:40px;
    margin-right:20px;
    border:1px solid orchid;
    border-radius: 50% 50%;
}

/* 文章列表模块 */
.topic-zone-wrapper .topic-zone-center .topic-zone-topic-list-wrapper{
    width:80%;
    text-align: center;
}
.topic-zone-wrapper .topic-zone-center .topic-zone-topic-list-wrapper h2{
    padding-bottom: 1px;
}

.topic-zone-topic-list-wrapper .publish{
    display: block;
    width:100px;
    height:30px;
    color:ghostwhite;
    line-height: 30px;
    background:deepskyblue;
    border:1px solid mediumpurple;
    border-radius: 4px 4px;
    text-decoration: none;
    margin-top: 4px;
    margin-bottom:4px;
    margin-left:79.5%;
}
.topic-zone-topic-list-wrapper .topic-title a {
    text-decoration: none;
}

.topic-zone-topic-list-wrapper .publish:hover{
    background:palevioletred;
    color:white;
}
.topic-zone-topic-list-wrapper .topic-title:hover{
    cursor: pointer;
    background: rgba(0,0,0,.1);
}
.topic-zone-topic-list-wrapper .topic-title:hover a{
    color:#FF6666;
    text-decoration: underline;
}

.topic-zone-topic-list-wrapper .topic-zone-topic-table{
    width:80%;
    line-height: 40px;
    margin:0 auto;
    background: rgba(255,255,255,.1);
}

.topic-zone-topic-table,
.topic-zone-topic-table th,
.topic-zone-topic-table td{
    text-align: center;
    border:1px solid hotpink;
    border-collapse: collapse;
}

.topic-zone-topic-table .delete:hover{
    cursor: pointer;
    color:red;
    background: rgba(0,0,0,.1);
}

.topic-zone-topic-list-wrapper .page-btn-wrapper{
    width:100%;
    margin-top:10px;
}
.topic-zone-topic-list-wrapper .page-btn-wrapper button{
    width:100px;
    height:30px;
    background: antiquewhite;
    border:1px solid lightskyblue;
    cursor: pointer;
}


/*页面底部*/
.topic-zone-wrapper .topic-zone-bottom{
    width:100%;
    padding:40px 0;
    color:springgreen;
    text-align: center;
    background: #12c2e9; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #12c2e9, #c471ed, #f64f59); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
}